<script setup lang="ts">
let props = defineProps(["contentJson"]);
let contentJson = ref(props.contentJson);
// 如果是二级或三级控件 根据父级判断是否显示
function f_IfShow(data) {
  if (data.level == 1) {
    return true;
  }
  let parentValue = "";
  for (let i = 0; i < contentJson.value.length; i++) {
    if (contentJson.value[i].id == data.parentId) {
      parentValue = contentJson.value[i].value;
      break;
    }
  }
  if (data.value == parentValue) {
    return true;
  } else {
    return false;
  }
}

// 返回地址
function f_GetUrl(data) {
  if (!data) return "";
  let path = "";
  if (Array.isArray(data)) {
    path = data[0].url;
  } else {
    path = eval(JSON.parse(data)).path;
  }

  return import.meta.env.VITE_APP_BASE_API_UPLOAD + path;
}

// 返回地址
function f_GetUrl1(data) {
  if (!data) return "";
  let path = "";
  if (Array.isArray(data)) {
    path = data[0].url;
  } else {
    path = eval(JSON.parse(data)).path;
  }

  return path;
}

// 返回图片列表
function f_GetPreviewList(data) {
  if (data == "图片" || data == "") return;
  let arr = [];
  data.forEach((item) => {
    arr.push(item.url);
  });

  return arr;
}

watchEffect(() => {
  contentJson.value = props.contentJson;

  console.log(contentJson.value);
});
</script>

<template>
  <div>
    <div class="con-wrap">
      <el-form label-position="top" size="default" label-width="120">
        <div v-for="(element, index) in contentJson" :key="element.id">
          <div
            v-if="element.type == 1 && f_IfShow(element)"
            style="margin: 4px 0"
          >
            <el-form-item>
              <template #label>
                <label>
                  <b v-if="element.required" class="color-[red]">*</b>
                  {{ element.title }}
                </label>
              </template>
              <el-input v-model="element.value" disabled />
            </el-form-item>
          </div>
          <div
            v-if="element.type == 2 && f_IfShow(element)"
            style="margin: 4px 0"
          >
            <el-form-item>
              <template #label>
                <label>
                  <b v-if="element.required" class="color-[red]">*</b>
                  {{ element.title }}
                </label>
              </template>
              <el-input v-model="element.value" disabled type="textarea" />
            </el-form-item>
          </div>
          <div
            v-if="element.type == 3 && f_IfShow(element)"
            style="margin: 4px 0"
          >
            <div>
              <el-form-item>
                <template #label>
                  <label>
                    <b v-if="element.required" class="color-[red]">*</b>
                    {{ element.title }}
                  </label>
                </template>

                <el-radio-group v-model="element.value" disabled>
                  <el-radio
                    v-for="(elementChild, index) in element.option"
                    :key="index"
                    :label="elementChild.title"
                  />
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
          <div
            v-if="element.type == 4 && f_IfShow(element)"
            style="margin: 4px 0"
          >
            <el-form-item>
              <template #label>
                <label>
                  <b v-if="element.required" class="color-[red]">*</b>
                  {{ element.title }}
                </label>
              </template>
              <div class="pt-[1px]"></div>
              <el-checkbox-group v-model="element.value" disabled>
                <el-checkbox
                  :label="elementChild.title"
                  name="type"
                  v-for="(elementChild, index) in element.option"
                  :key="index"
                />
              </el-checkbox-group>
            </el-form-item>
          </div>
          <div v-if="element.type == 5 && f_IfShow(element)">
            <el-form-item>
              <template #label>
                <label>
                  <b v-if="element.required" class="color-[red]">*</b>
                  {{ element.title }}
                </label>
              </template>
              <div class="pt-[1px] w-[100%]"></div>
              <!-- <img src="../../assets/upload.png" style="height: 50px" /> -->
              <div
                v-if="element.value && element.value != '图片'"
                class="pt-[1px] w-[100%]"
              >
                <el-image
                  v-for="img in element.value"
                  :key="img.url"
                  style="float: left; width: 32%; height: auto"
                  :src="img.url"
                  :initial-index="0"
                  :preview-src-list="f_GetPreviewList(element.value)"
                />
              </div>
            </el-form-item>
          </div>
          <div v-if="element.type == 6 && f_IfShow(element)">
            <el-form-item>
              <template #label>
                <label>
                  <b v-if="element.required" class="color-[red]">*</b>
                  {{ element.title }}
                </label>
              </template>
              <div class="pt-[1px] w-[100%]"></div>
              <!-- <img src="../../assets/scan.png" style="height: 50px" /> -->
              <el-input v-model="element.value" disabled type="textarea" />
            </el-form-item>
          </div>
          <div v-if="element.type == 7 && f_IfShow(element)">
            <el-form-item>
              <template #label>
                <label>
                  <b v-if="element.required" class="color-[red]">*</b>
                  {{ element.title }}
                </label>
              </template>
              <el-date-picker
                v-model="element.value"
                type="datetime"
                disabled
              />
            </el-form-item>
          </div>
          <div v-if="element.type == 8 && f_IfShow(element)">
            <el-form-item>
              <template #label>
                <label>
                  <b v-if="element.required" class="color-[red]">*</b>
                  {{ element.title }}
                </label>
              </template>
              <div class="pt-[1px] w-[100%]"></div>
              <div
                v-if="element.value && element.value != '图片'"
                class="pt-[1px] w-[100%]"
              >
                <el-image
                  v-for="img in element.value"
                  :key="img.url"
                  style="float: left; width: 32%; height: auto"
                  :src="img.url"
                  :initial-index="0"
                  :preview-src-list="f_GetPreviewList(element.value)"
                />
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.el-form {
  display: block;
  font-size: 12px !important;

  :deep .el-input,
  :deep .el-checkbox-group,
  :deep .el-radio-group {
    width: 100%;
    text-align: left;
  }

  :deep .el-form-item {
    margin-right: 4px;
  }

  :deep .el-form-item__content > label {
    color: #27d487;
    // font-weight: bold;
    // font-family: fangsong;
  }
}
</style>
